<template>
	<view class="mainpadding">
		<view class="flexbetween xiahuaxian">
			<view class="flexleft">
				<view class="xiaohei sanshier  fonweight kuandu">地址</view>
				<uni-data-picker @change="bindPickerChange" :localdata="items" placeholder="请选择住址" popup-title="请选择地区"
					v-model="area" class="zdy">
					<text class="inputs1" v-if="!area.length" style="color: #999999;">请选择住址</text>
					<text class="inputs1" v-else>{{ area[0] }}/{{ area[1] }}/{{ area[2] }}</text>
				</uni-data-picker>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="flexleft xiahuaxian margin_top">
			<view class="xiaohei sanshier  fonweight kuandu">门牌号</view>
			<input type="text" placeholder="例：1单元101">
		</view>
		<view class="flexleft xiahuaxian margin_top">
			<view class="xiaohei sanshier  fonweight kuandu">联系人</view>
			<input type="text" placeholder="请填写联系人姓名">
		</view>
		<view class="flexleft xiahuaxian margin_top">
			<view class="xiaohei sanshier  fonweight kuandu">手机号</view>
			<input type="text" placeholder="请填写联系人手机号">
		</view>
		<view class="flexbetween margin_top">
			<view class="xiaohei sanshier  fonweight ">设置为默认地址</view>
			<u-switch v-model="value" @change="change"></u-switch>
		</view>
		<view class="gudingdb ffffff mainpadding">
			<view class="bigbtn">保存地址</view>
		</view>
	</view>
</template>

<script>
	import citys from "../static/city/city.js"
	export default {
		data() {
			return {
				address: {
					province: "", //省
					city: "", //市
					county: "", //区
				},
				area: [], //收获地址
				items: citys.data,
				value: true,
			}
		},
		methods: {
			change(e) {
				console.log('change', e);
			},
			bindPickerChange(val) {
				let area = val.detail.value
				this.area = [area[0].text, area[1].text, area[2].text];
				this.address.province = area[0].text;
				this.address.city = area[1].text;
				this.address.county = area[2].text;
				console.log(this.area)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.zdy {
		font-size: 32rpx;
	}

	.kuandu {
		width: 130rpx;
	}
</style>